<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #my3dspace{
            -webkit-perspective: 800px;
            -webkit-perspective-origin: 50% 50%;

            overflow: hidden;
        }

        #pagegroup{
            width: 400px;
            height: 400px;
            margin:0 auto;

            -webkit-transform-style: preserve-3d;

            position: relative;
        }

        .page{
            width: 360px;
            height: 360px;
            padding: 20px;
            background-color: black;

            color: white;

            font-weight: bold;
            font-size: 360px;
            line-height: 360px;
            text-align: center;

            position: absolute;
        }

        #page1{
            -webkit-transform-origin: bottom;
            -webkit-transition: -webkit-transform 1s linear;
        }

        #page2, #page3, #page4, #page5, #page6{
            -webkit-transform-origin: bottom;
            -webkit-transition: -webkit-transform 1s linear;
            -webkit-transform: rotateX(90deg);
        }

        #op{
            text-align: center;
            margin: 40px auto;
        }
    </style>

    <script type="text/javascript">

        var curIndex = 1;
        function next() {
            if( curIndex === 6 ){
                alert("到底了")
                return;
            }

            var curPage = document.getElementById("page"+curIndex);
            curPage.style.webkitTransform = "rotateX(-90deg)";

            curIndex ++;
            var nextPage = document.getElementById("page"+curIndex);
            nextPage.style.webkitTransform = "rotateX(0deg)";


        }



        function prev() {
            if(curIndex === 1){
                alert("已经第一页了,请点击下一页")
                return;
            }

            var curPage = document.getElementById("page"+curIndex);
            curPage.style.webkitTransform = "rotateX(90deg)";

            curIndex --;
            var prevPage = document.getElementById("page"+curIndex);
            prevPage.style.webkitTransform = "rotateX(0deg)";


        }


    </script>
</head>
<body>
    <div id="my3dspace">
        <div id="pagegroup">
            <div class="page" id="page1">1</div>
            <div class="page" id="page2">2</div>
            <div class="page" id="page3">3</div>
            <div class="page" id="page4">4</div>
            <div class="page" id="page5">5</div>
            <div class="page" id="page6">6</div>
        </div>
    </div>

    <div id="op">
        <a href="javascript:next()">next</a>&nbsp;<a href="javascript:prev()">previous</a>
    </div>

</body>
</html>